<style type="text/css">
    .reta{
        width:100%;
        border:#CCCCCC solid 1px;
    }
    #reteteacher
    {
        width:500px;
        margin:0 auto;
        padding:5px;
    }
    #reteteacher td{
        padding:8px;
    }
    select{
        width:155px;
        overflow:hidden;
        height:20px;
        font-family:font-family:"微软雅黑","宋体";
        border:1px #CCCCCC solid;
    }
    #star{position:relative;}
    #star ul,#star span{float:left;display:inline;height:19px;line-height:19px;}
    #star ul{margin:0 10px;}
    #star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(http://www.codefans.net/jscss/demoimg/201206/star.png) no-repeat;}
    #star strong{color:#f60;padding-left:10px;}
    #star li.on{background-position:0 -28px;}
    #star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(http://www.codefans.net/jscss/demoimg/201206/icon.gif) no-repeat;padding:7px 10px 0;}
    #star p em{color:#f60;display:block;font-style:normal;}
</style>
<script type="text/javascript"> 
window.onload = function ()
{
	var oStar = document.getElementById("star");
	var aLi = oStar.getElementsByTagName("li");
	var oUl = oStar.getElementsByTagName("ul")[0];
	var oSpan = oStar.getElementsByTagName("span")[1];
	var oP = oStar.getElementsByTagName("p")[0];
	var i = iScore = iStar = 0;
	var aMsg = [
				"非常差|对学生不关心,邮件不回复,视频和课件都没有",
				"比较差|很少回复邮件,课件和视频几乎没有",
				"一般|能够回复部分邮件,课件和视频比较少",
				"较好|能够回复部分邮件,有部分的课件和视频",
				"非常好|能够及时回复学生的邮件,课件和视频资源也很多"
				]
	
	for (i = 1; i <= aLi.length; i++)
	{
		aLi[i - 1].index = i;
		//鼠标移过显示分数
		aLi[i - 1].onmouseover = function ()
		{
			fnPoint(this.index);
			//浮动层显示
			oP.style.display = "block";
			//计算浮动层位置
			oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
			//匹配浮动层文字内容
			oP.innerHTML = "<em><b>" + this.index + "</b> 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "</em>" + aMsg[this.index - 1].match(/\|(.+)/)[1]
		};
		//鼠标离开后恢复上次评分
		aLi[i - 1].onmouseout = function ()
		{
			fnPoint();
			//封闭浮动层
			oP.style.display = "none"
		};
		//点击后进行评分处理
		aLi[i - 1].onclick = function ()
		{
			iStar = this.index;
			oP.style.display = "none";
			oSpan.innerHTML = "<strong>" + (this.index) + " 分</strong> (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"
		}
	}
	//评分处理
	function fnPoint(iArg)
	{
		//分数赋值
		iScore = iArg || iStar;
		for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";	
	}
};
</script>
<div id="indexcates" >
        <div class="row-fluid"  >
            <ul class="breadcrumb">
                <li><a href="#">选择您要评价的老师→</a> </li>
            </ul>
        </div>
            <div class="reta">  <br/><br/>
                    <form method="post" action="">
                        <table cellpadding="0" cellspacing="0" id="reteteacher" >
                            <tr>
                                <td width="30%" align="right">所属系:</td>
                                <td>
                                    <select name="department" id="department" onchange="choseteacher()">
                                        <option value="0">请选择老师所属的系</option>
                                        <?php 
                                            $result = $db->query("select * from nettteach_department");
                                            while($row = $db->fetch_array($result))
                                            {?>
                                                <option value="<?php echo $row['id']?>"><?php echo $row['name']; ?></option>
                                            <?php 
                                                }
                                            ?>     
                                    </select>
                                </td>  
                            </tr>
                            <tr>
                                <td align="right">选择老师:</td>
                                <td>
                                    <select name="chooseteacher" id="addteacher">
                                        <option value="0">选择一名老师</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td align="right">点击星星就能打分:</td>
                                <td>
                                    <div id="star">
                                        <ul>
                                            <li><a href="javascript:;">1</a></li>
                                            <li><a href="javascript:;">2</a></li>
                                            <li><a href="javascript:;">3</a></li>
                                            <li><a href="javascript:;">4</a></li>
                                            <li><a href="javascript:;">5</a></li>
                                        </ul>
                                        <span></span>
                                        <p></p>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                    <input type="submit" name="sub" value="评价功能暂不开放"  disabled />
                                </td>
                            </tr>
                            
                        </table>
                </form>
            </div>
</div>
<script type="text/javascript">
function choseteacher()
{
    var department_id = $("#department").val();
    $.ajax({
        url: '?do=ajax&c=chooseteacher',
        type: 'post',
        data: 'departmentid='+department_id,
        dataType: 'html',
        async:false,
        timeout: 5000,
        error: function(){
            alert('Error loading XML document');
        },
        success: function(html){
            $("#addteacher").html(html);
        }
   });
}
</script>